<template>
  <div class="fav">
    <div class="charger-list"></div>

    <div style="display: none" id="templates">
      <div class="container charger-item">
        <div class="charger-sub-item charger-bd">
          <div class="charger-name">电站名称</div>
          <div class="charger-address">电站地址</div>
          <div class="charger-port">
            <span>设备编号：</span><span class="charger-sn"></span>
            <span class="vline"></span>
          </div>
          <div class="charger-port">
            <span class="tag-status status-all">共</span>
            <span class="status-count status-all-count"></span>
            <span class="tag-status status-charging">充</span>
            <span class="status-count status-charging-count"></span>
            <span class="tag-status status-free">闲</span>
            <span
              class="status-count status-count-none status-free-count"
            ></span>
          </div>
        </div>
        <div class="charger-sub-item charger-ft">
          <div class="charger-status">
            <span class="tag-status">--</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped lang="less">
.container {
  background: #fff;
  font-size: 1em;
}
.charger-list {
  margin-bottom: 6px;
}
.charger-item {
  display: flex;
  -webkit-flex: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px 10px 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 0px 1px 1px #ccc;
}
.charger-sub-item {
  flex: none;
}
.btn-area {
  padding: 8px 32px;
}
.btn-area .btn-primary {
  color: #fff;
  background: #5089cf;
}
.btn-area .btn-disabled {
  color: #999;
  background: #eee;
}

span.vline {
  width: 1px;
  margin: 4px;
}

.charger-status .tag-status {
  display: inline-block;
  border-radius: 8px;
  font-size: 0.8em;
  padding: 6px;
}
.charger-port,
.charger-address {
  font-size: 0.8em;
  color: #999;
}
.charger-port {
  color: #666;
}
.charger-port .tag-status {
  display: inline-block;
  border-radius: 5px;
  padding: 0 5px;
}
.charger-port .status-count {
}
.status-count {
  margin-right: 50px;
  font-size: 1.2em;
  color: #333;
}
.status-count-none {
  margin-right: 0px;
}
.charger-name {
  line-height: 2.5em;
}

.status-charging {
  background: #4285f4;
  color: #fff;
}
.status-all {
  background: #6563ba;
  color: #fff;
}
.status-free {
  background: #50ae59;
  color: #fff;
}
.status-error {
  background: #ae5059;
  color: #fff;
}
.status-offline {
  background: #eee;
  color: #999;
}

.tabs-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 8px 16px 0 16px;
  margin-bottom: 8px;
}
.tabs-container .tab {
  flex: auto;
  font-size: 1em;
  margin: 0 16px;
  text-align: center;
  font-size: 1em;
  background: #fff;
  color: #000;
  padding-bottom: 4px;
  border-bottom: 2px solid #fff;
}
.tabs-container .tab.selected {
  color: #5089cf;
  border-bottom: 2px solid #5089cf;
}
</style>
